<template>
  <div>
    <a-pagination
      showQuickJumper
      :current="page"
      :total="total"
      :pageSize="pageSize"
      :showTotal="total => `共 ${total} 条`"
      @change="handleChange"
      showSizeChanger
      :pageSizeOptions="pageSizeOptions"
      @showSizeChange="handleSizeChange"
      class="pagination"
    />
  </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    // 父组件传子组件总数
    total: {
      default: 0
    }
  },
  computed: {
    pageSizeOptions() {
      return ['10', '20', '30', '40']
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.fetchEvent()
  },
  methods: {
    getData() {
      this.page = 1
      this.fetchEvent()
    },
    getEvent() {
      this.fetchEvent()
    },
    fetchEvent() {
      this.$emit('loadDataList', {
        page: this.page,
        pageSize: this.pageSize
      })
    },
    // 页码改变的回调，参数是改变后的页码及每页条数
    handleChange(pageNumber) {
      this.page = pageNumber
      this.fetchEvent()
    },
    // pageSize 变化的回调 (每页显示多少条数据)
    handleSizeChange(current, pageSize) {
      this.page = 1
      this.pageSize = pageSize
      this.fetchEvent()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
